<template>
  <div class="home">
  <headTop/>
   <div class="kuang1">
     <div class="sp">
       <div class="list" v-for='(item,index) in a.data' :key="index">
         <div @click="chuanan(item)"><div class="a">
           <div class="tu"><img :src="myImage(item.imageUrl)" alt="我是图片"></div>
           <div class="name">{{item.productName}}</div>
           <div class="jg">售价: <span class="qw">￥{{item.productPrice}}</span></div>
         </div>
         </div>
       </div>
       <div class="an">
         <span class="b">
         <el-pagination  background layout="prev, pager, next" :total="b">
         </el-pagination>
         </span>
       </div>
     </div>
     <div class="gl"></div>
   </div>
  <div class="zhouhao">
    <div>
      <div>
        <div style="margin-top: 20px">
          <span style="margin-left: 15px">品类：</span>
          <el-radio-group v-model="radioCategoryName" size="medium" @change="search">
            <el-radio-button  label="" @click="1">全部</el-radio-button>
            <el-radio-button v-for="(item,index) in cateNameList" :key="index" :label="item.categoryName"></el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div style="margin-top: 20px">
        <span style="margin-left: 15px">规格：</span>
        <el-radio-group v-model="radioScfcName" size="medium"  @change="search">
          <el-radio-button  label="" @click="search">全部</el-radio-button>
          <el-radio-button v-for="(item,index) in scfcNameList" :key="index" :label="item.scfcName" @click="search"></el-radio-button>
        </el-radio-group>
      </div>
      <div style="margin-top: 20px">
        <span style="margin-left: 15px">搜索：</span>
        <el-input v-model="input" placeholder="请输入内容" style="width: 250px" @change="search" @keydown="search"></el-input>
      </div>
      <el-table
        :data="list"
        style="width: 100%;margin-top: 25px"
        @selection-change='chose'>
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="产品编码"
          width="160">
          <template slot-scope="scope">
            <span >{{ scope.row.productCode }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="品类"
          width="160">
          <template slot-scope="scope">
            <span >{{ scope.row.categoryName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="品名"
          width="160">
          <template slot-scope="scope">
            <span >{{ scope.row.productName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="产品规格"
          width="180">
          <template slot-scope="scope">
            <span >{{ scope.row.scfcName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="产品描述"
          width="160">
          <template slot-scope="scope">
            <span >{{ scope.row.productDescribe }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="单价"
          width="160">
          <template slot-scope="scope">
            <span >￥{{ scope.row.productPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="库存"
          width="160">
          <template slot-scope="scope">
            <span >{{ scope.row.productRepertory }}</span>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination
        class="page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 15]"
        :page-size="currentPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="zpage">
      </el-pagination>
      <div class="getgwc" v-if="role() === 1" >
        <el-button type="warning" @click="gm">立即购买</el-button>
        <el-button type="danger" @click="gwc">加入购物车</el-button>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
// @ is an alias to /src
import headTop from '@/components/headTop.vue'
export default {
  name: 'home',
  data () {
    return {
      radioCategoryName: '',
      radioScfcName: '',
      a: '',
      b: 10,
      list: this.list,
      input: '',
      cateNameList: this.cateNameList,
      scfcNameList: this.scfcNameList,
      currentPage: 5,
      page: 1,
      zpage: 1,
      data: []
    }
  },
  components: {
    headTop
  },
  created: function () {
    this.$axios.post('product/queryProductInfo', { page: 1, limit: 9 })
      .then((response) => {
        window.console.log(response)
        this.a = response.data
        this.b += parseInt(((response.data.data.length) / 9)) * 10
        window.console.log(this.b)
      })
      .catch(function (error) {
        window.console.log(error)
      })
    this.$axios.post('product/queryProductInfo', { page: this.page, limit: this.currentPage })
      .then((res) => {
        this.list = res.data.data
        this.zpage = Math.ceil(res.data.count)
      })
    this.$axios.post('product/queryCategory')
      .then((res) => {
        // window.console.log(res.data.data)
        this.cateNameList = res.data.data
      })
    this.$axios.post('product/querySpecification', { limit: 99, page: 1 })
      .then((res) => {
        // window.console.log(res.data.data)
        this.scfcNameList = res.data.data
      })
  },
  methods: {
    role () {
      return this.$store.getters.getUserInfo.roleId
    },
    chuanan (item) {
      console.log('item')
      console.log(item)
      this.$router.push({
        path: '/productDetails',
        query: {
          item: item
        }
      })
    },
    gm () {
      console.log('立即购买')
      console.log(this.data)
      if (this.data.length > 0) {
        this.$router.push({
          path: '/createOrder',
          query: {
            item: this.data
          }
        })
      } else {
        alert('未选择商品')
      }
    },
    gwc () {
      console.log('购物车')
      console.log(this.data)
      if (this.data.length > 0) {
        console.log(this.$store.getters.getCompany.dealerId)
        let dealerId = this.$store.getters.getCompany.dealerId
        for (var i = 0; i < this.data.length; i++) {
          this.data[i].dealerId = dealerId
          this.data[i].productNum = 1
          this.data[i].payMoney = this.data[i].productPrice
        }
        this.$axios.post('shoppingCart/addShoppingCart', this.data)
          .then((res) => {
            if (res.data.code === 200) {
              console.log(res)
              this.open('加入成功！', 'success')
            } else {
              this.open('加入失败！', 'warning')
            }
          })
          .catch((error) => {
            this.open('加入购物车失败！', 'warning')
            console.log(error)
          })
      } else {
        alert('未选择商品')
      }
    },
    chose (val) {
      this.data = val
      window.console.log(this.data)
    },
    handleDelete (index, row) {
      let productId = row.productId
      this.$axios.post('product/delProductInfo', { productId: productId })
        .then((res) => {
          // window.console.log(res)
          if (res.data.code === 200) {
            alert('下架成功')
          }
        })
    },
    search () {
      console.log(this.radioCategoryName)
      console.log(this.input)
      console.log(this.radioscfcName)
      this.$axios.post('product/queryProductInfos', {
        page: this.page, limit: this.currentPage, categoryName: this.radioCategoryName, productName: this.input, scfcName: this.radioScfcName
      }).then((res) => {
        if (res.data.code === 200) {
          this.list = res.data.data
          console.log('list')
          console.log(res.data.data)
        }
      })
    },
    handleSizeChange (newsize) {
      window.console.log(newsize)
      this.currentPage = newsize
      var that = this
      this.$axios.post('product/queryProductInfo', { page: this.page, limit: this.currentPage })
        .then(function (res) {
          that.list = res.data.data
          that.zpage = Math.ceil(res.data.count)
        })
    },
    handleCurrentChange (newpage) {
      window.console.log(newpage)
      this.page = newpage
      var that = this
      this.$axios.post('product/queryProductInfo', { page: this.page, limit: this.currentPage })
        .then(function (res) {
          that.list = res.data.data
          that.zpage = res.data.count
        })
    }
  }
}
</script>
<style scoped>
  .zhouhao{
    padding-bottom: 50px;
  }
  .getgwc{
    width: 95%;
    height: 150px;
    text-align: right;
  }
  .page{
    margin-left: 30%;
    margin-top: 20px;
  }
.b{
  text-align: center;
  /*width: 200px;*/
  white-space: nowrap;
  /*border: 1px solid green;*/
  margin: 0 auto;
}
.an{
  width: 100%;
  /*border: 1px solid red;*/
  margin-top: 15px;
  /*margin-left:40%;*/
  float: left;
}
.qw{
  font-size: 20px;
  color:red;
}
.jg{
  color: #555555;
  margin-top: 20px ;
  margin-left: 5%;
  font-size: 13px;
}
.name{
  font-size: 13px;
  margin-top: 10px;
  text-align: center;
}
.tu{
  /*border: 1px solid black;*/
  height: 200px;
  width: 100%;
}
.gl{
  float: right;
  width: 24%;
  /*border: 1px solid green;*/
  /*height: 900px;*/
}
.a{
  float: left;
  margin-left: 6%;
  margin-top: 3%;
  /*border: 1px solid red;*/
  width: 25%;
  height: 300px;
  background-color:white;
  display: inline-block;
}
.sp{
  overflow: hidden;
  /*float: left;*/
  display: inline-block;
  width: 75%;
  margin: 0 0 30px;
  /*border: 1px solid black;*/
  /*height: 900px;*/
}
.kuang1{
  overflow: hidden;
  margin-top: 1px;
  width: 100%;
  /*height: 600px;*/
  background-color:rgb(239,242,247);
}

</style>
